<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从输入URL到页面加载完成</title>
</head>
<body>
1、浏览器的地址栏输入URL并按下回车。
    http://www.baidu.com:80/index.html
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
    //如果不存在则直接访问DNS服务器 并更新缓存信息
        //123.12.13.24

3、DNS解析URL对应的IP。
    //DNS。域名系统服务器
    //www.baidu.com
        IPS(网络服务提供商)负责运营和维护DNS服务器
    //www.baidu.com &ndash;&gt; 从顶级域名开始一步一步的查找对应的IP地址表 找到之后进行转发和返回 --> 123.12.13.24

    //IP地址
        4组从0-255数组组成的网络地址

4、根据IP建立TCP连接（三次握手）。
    //ISO 国际标准化组织

    //OSI 开放式系统互联通信参考模型（英语：Open System Interconnection Reference Model，缩写为 OSI）

    //TCP/IP 协议簇

        TCP 面向链接的协议
        UDP

5、HTTP发起请求。

6、服务器处理请求，浏览器接收HTTP响应。

7、渲染页面，构建DOM树。
https://zhuanlan.zhihu.com/p/74792085

    官方给的一种解释：

    未构建完的CSSOMTree是不准确的，浏览器必须等到CSSOMTree构建完毕后才能进入下一阶段。
    所以，CSS的加载速度与构建CSSOMTree的速度将直接影响首屏渲染速度，因此在默认情况下CSS被视为阻塞渲染的资源，需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
    那么回到上面生成DOM时提到的JS问题：在标签没有设置async/defer属性时，js会阻塞DOM的生成。原因是js会改变DOMTree的内容，如果不阻塞，会出现一边生成DOM内容，一边修改DOM内容的情况，无法确保最终生成的DOMTree是确定唯一的。

    同理，JS也会可以修改CSS样式，影响CSSOMTree最终的结果。而我们前面提到，不完整的CSSOMTree是不可以被使用的，如果JS试图在浏览器还未完成CSSOMTree的下载和构建时去操作CSS样式，浏览器会暂停脚本的运行和DOM的构建，直至浏览器完成了CSSOM的下载和构建。也就是说，JS脚本的出现会让CSSOM的构建阻塞DOM的构建。

8、关闭TCP连接（四次挥手）。
</body>
<script async>
    //1 link是否会阻塞DOM树渲染 (不会)
    //1.1 css文件中的import是如何渲染的
            //当DOM树构建完成后并且等到CSSOM也构建完成之后(在构建cssom的时候如果遇见了import会直接的去下载这个css,但是不会去执行它), 浏览器会把这两个树进行合并,并且真实的打印到页面上
                //然后再回读取通过import下载出来的css文件 接着把这个文件中的样式渲染到页面
                //这样会导致页面闪烁 (尤其是网速慢的时候 更明显)
    //2 img图片加载是否会阻塞DOM树渲染 (不会)
    //3 script src是否会阻塞DOM树渲染
    //    (下载(停止DOM渲染),下载完成,JS(DOM停止)  下载完成,执行完成后DOM才会继续渲染)


    //重绘和回流
    //DOM性能 浏览器的性能大部分都是被这两个问题所消耗
    //重绘
//        DOM树没有元素增加或删除,只是样式的改变,会导致浏览器对某一个元素进行单独的渲染,这个过程就叫做重绘
    //回流
        //DOM树中的元素被增加或者删除,导致浏览器需要重新的去渲染整个DOM树

    //回流比重绘更消耗性能 发生回流必定会重绘  重绘不一定导致回流

    //因为重绘和回流的存在导致真实DOM性能不佳,所以VUE和recat还有angular等框架增加了虚拟DOM技术,就是为了减少DOM的重绘和回流从而减少浏览器性能消耗, 这就是虚拟DOM的好处



</script>
</html>
